<script setup lang="ts">
import { useMapStore } from "@/store";
import PipePoint from "../Draw/PipePoint/index.vue";
import PipeLines from "../Draw/PipeLines/index.vue";
import InfoList from "./InfoList/index.vue";
const mapStore = useMapStore();
const {
  addedPipePoint,
  isShowPipeInfoList,
  addedPipeLines,
  lineDepth,
  editingPipePoint,
  editingPipeLine,
  selectedMarkers,
} = storeToRefs(mapStore);
const close = () => {
  mapStore.setAddedPipePoint(null);
  mapStore.setAddedPipeLines(null);
  mapStore.setLineDepth(0)
  mapStore.setTmpPipeLines([]);
  mapStore.clearSelectedMarkers();
  mapStore.setSplitLines([]);
  mapStore.setAddedPipePointOnLine(null);
  mapStore.setEditingPipePoint(null);
  mapStore.setEditingPipeLine(null);
};
const clacDepth = () => {
  if (selectedMarkers.value.length === 2) {
    const list = selectedMarkers.value;
    const total = list[0].depth + list[1].depth;
    return Number((total / 2).toFixed(2));
  }
  return lineDepth.value || 0;
};
</script>

<template>
  <PipePoint
    v-if="addedPipePoint || editingPipePoint"
    :position="addedPipePoint"
    :editor="editingPipePoint"
    @close="close"
  />
  <InfoList :viewState="isShowPipeInfoList" />
  <PipeLines
    v-if="addedPipeLines || editingPipeLine"
    :positions="addedPipeLines"
    :lineDepth="clacDepth()"
    :editor="editingPipeLine"
    @close="close"
  />
</template>

<style scoped lang="scss"></style>
